{% extends '../../layout/default.njk' %}

{% block main %}
<div class="main-box">
    <div class="dock-shadow">
        <nav class="dock-nav">
            <ul class="boiling-nav-list">
                <li class="boiling-nav-item {% if boilingPointType === 'recommend' %} active {% endif %}">
                    <a href="/boilings/recommend">推荐</a>
                </li>
                <li class="boiling-nav-item {% if boilingPointType === 'hot' %} active {% endif %}">
                    <a href="/boilings/hot">热门</a>
                </li>
                <li class="boiling-nav-item {% if boilingPointType === 'followed' %} active {% endif %}">
                    <a href="/boilings/followed">关注</a>
                </li>
                {% for topic in topics %}
                <li class="boiling-nav-item {% if topicID === topic.id %} active {% endif %}">
                    <a href="/boilings/topic/{{topic.id}}">{{topic.name}}</a>
                </li>
                {% endfor %}
            </ul>
        </nav>
    </div>
    <div class="stream">
        <div id="centerBox"></div>
    </div>
    <aside class="boiling-sidebar">
        {% if user %}
        <div class="boiling-profile-box">
            <div class="boiling-profile">
                <a href="/uc/{{user.id}}" target="_blank">
                    <div class="boiling-avatar" style="background-image: url({{user.avatarURL}})"></div>
                </a>
                <div class="boiling-user-info">
                    <a href="/uc/{{user.id}}" target="_blank" class="boiling-username">{{user.username}}</a>
                    <div class="boiling-position"></div>
                </div>
            </div>
            <ul class="boiling-stat-list">
                <a href="/uc/{{user.id}}/boilings" target="_blank" class="boiling-item">
                    <div class="boiling-title">沸点</div>
                    <div class="boiling-count">{{user.boilingPointCount | defaultValue(0)}}</div>
                </a>
                <a href="/uc/{{user.id}}/follows" target="_blank" class="boiling-item">
                    <div class="boiling-title">关注</div>
                    <div class="boiling-count">{{user.followCount | defaultValue(0)}}</div>
                </a>
                <a href="/uc/{{user.id}}/followers" target="_blank" class="boiling-item">
                    <div class="boiling-title">粉丝</div>
                    <div class="boiling-count">{{user.followerCount | defaultValue(0)}}</div>
                </a>
            </ul>
        </div>
        {% endif %}
        <div class="related-pin-block pin-block">
            <header>推荐沸点</header>
            <ul class="pin-list">
                {% for bp in globalRecommends %}
                <li class="pin-item">
                    <a href="/boiling/{{bp.id}}" target="_blank" title="{{bp.summary}}" class="pin">
                        <div class="boiling-content-box">
                            <div class="boiling-content" style="-webkit-box-orient: vertical;{% if not bp.imgs.length %}max-width: 215px;{% endif %}">{{bp.summary}}</div>
                            <div class="boiling-stat1" {% if not bp.imgs.length %}style="margin-top: 4px;"{% endif %}>
                                <span>{{bp.likedCount}} 赞 · </span>
                                <span>{{bp.commentCount}} 评论</span>
                            </div>
                        </div>
                        {% if bp.imgs.length %}
                        <div class="boiling-image-box" style="background-image: url({{bp.imgs[0].url}});"></div>
                        {% endif %}
                    </a>
                </li>
                {% endfor %}
            </ul>
        </div>
        <a class="guide-link shadow" href="" target="_blank">
            <img src="{{imgPath}}/boilingpoint/guideicon.svg" class="icon">
            <span class="title">如何玩转沸点</span>
        </a>
    </aside>
</div>
{% endblock %}

{% block pageData %}
<script>
    // 当页面是推荐、热门、关注时，topicID为''
    var topicID = {% if topicID %}{{topicID}}{% else %}undefined{% endif %};
    {# 当前登录用户 #}
    var user = {% if user %} {{user | dump | safe}} {% else %}null{% endif %};
    // boilingPointType的值为 recommend、hot、followed 其中之一
    var boilingPointType = '{{ boilingPointType }}';
    // 阿里云oss的 policy
    var uploadPolicy = {{ uploadPolicy | dump | safe }};
    var commentsVisible = false; // 是否默认显示评论
</script>
{% endblock %}

{% block devjs %}
    {{ loadjs('entry/boilingpoint/boilingpoint.js') }}
{% endblock %}